<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>定时任务 · Quartz监控与任务管理</title>
  <link rel="stylesheet" href="../assets/styles.css" />
</head>
<body class="body-bg">
  <header class="header">
    <div class="title datav-title">河北省高速公路联网收费省级密钥资源池管理系统</div>
    <nav class="nav">
      <!-- <a class="active" href="jobs.html">定时任务</a>
      <a href="javascript:void(0)" onclick="alert('大屏示例：后续接入。')">大屏</a> -->
    </nav>
  </header>
  <div class="layout">
    <aside class="sidebar">
      <!-- <div class="logo">密钥资源池</div> -->
      <div class="logo">定时任务</div>
      <nav class="menu">
        <a href="../index.html">首页</a>
        <a href="app.html">应用管理</a>
        <a href="crypto.html">加密设备状态</a>
        <a href="security.html">安全设备状态</a>
        <a href="network.html">部省密钥网络状态</a>
        <a class="active" href="jobs.html">定时任务</a>
      </nav>
      <div class="tree">
        <div class="tree-node expanded">
          <div class="tree-header">报表管理<span class="chevron"></span></div>
          <div class="tree-children">
            <a class="tree-link" href="reports.html?tab=app" data-tab="app">服务调用统计</a>
            <a class="tree-link" href="reports.html?tab=crypto" data-tab="crypto">加密设备运行监测</a>
            <a class="tree-link" href="reports.html?tab=security" data-tab="security">安全设备运行监测</a>
            <a class="tree-link" href="reports.html?tab=network" data-tab="network">部省密钥网络运行报表</a>
          </div>
        </div>
      </div>
    </aside>

    <div class="content">
      <main class="container">
        <section class="card">
          <h3>任务筛选区</h3>
          <div class="filters" id="filters">
            <div class="field"><label>任务名</label><input id="qClass" class="input" placeholder="请输入任务名" /></div>
            <div class="field"><label>任务状态</label>
              <select id="qStatus" class="select">
                <option value="">请选择任务状态</option>
                <option value="正常">正常</option>
                <option value="停止">停止</option>
              </select>
            </div>
            <button class="button" id="btnQuery">查询</button>
            <button class="button secondary" id="btnReset">重置</button>
            <button class="button secondary" id="btnExport">导出</button>
          </div>
          <div style="margin-top:10px; display:flex; gap:8px;">
            <!-- <button class="button" id="btnAdd">新增</button> -->
            <!-- <label class="button secondary" for="fileImport" style="cursor:pointer;">导入</label> -->
            <input type="file" id="fileImport" accept=".csv" style="display:none;" />
          </div>
        </section>

        <section class="card" style="margin-top:12px;">
          <h3>任务列表</h3>
          <table class="table" id="tblJobs">
            <thead>
              <tr>
                <th style="width:40px;"><input type="checkbox" id="chkAll" /></th>
                <th>任务名</th>
                <th style="width:160px;">Cron表达式</th>
                <th>Cron表达式描述</th>
                <th style="width:100px;">状态</th>
              </tr>
            </thead>
            <tbody id="jobsBody">
              <tr>
                <td><input type="checkbox" /></td>
                <td>密钥服务调用报表统计</td>
                <td>0 30 9 * * ? *</td>
                <td>每天09:30执行</td>
                <td><span class="status" data-status="正常" style="color:#10b981;">正常</span></td>
              </tr>
              <tr>
                <td><input type="checkbox" /></td>
                <td>密钥服务各模块调用趋势统计</td>
                <td>0 15 10 * * ? *</td>
                <td>每天10:15执行</td>
                <td><span class="status" data-status="正常" style="color:#10b981;">正常</span></td>
              </tr>
              <tr>
                <td><input type="checkbox" /></td>
                <td>密钥服务各调用方统计</td>
                <td>0 3 0 3 * ? *</td>
                <td>每月3日00:03执行</td>
                <td><span class="status" data-status="正常" style="color:#10b981;">正常</span></td>
              </tr>
              <tr>
                <td><input type="checkbox" /></td>
                <td>密钥服务调用TOP10统计</td>
                <td>0 3 1 1,28,8,15,22 * ? *</td>
                <td>每月1/8/15/22/28日01:03执行</td>
                <td><span class="status" data-status="正常" style="color:#10b981;">正常</span></td>
              </tr>
              <tr>
                <td><input type="checkbox" /></td>
                <td>密钥服务调用成功率统计</td>
                <td>0 0 6 * * ? *</td>
                <td>每天06:00执行</td>
                <td><span class="status" data-status="正常" style="color:#10b981;">正常</span></td>
              </tr>
            </tbody>
          </table>
          <div class="hint" style="margin-top:8px;">共 5 条数据 · 10 条/页（示例数据）</div>
          <div class="pagination" style="display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:10px;">
            <button class="button secondary" id="pagePrev">上一页</button>
            <span>第 <strong id="pageNo">1</strong> / <span id="pageTotal">1</span> 页</span>
            <span style="display:flex; align-items:center; gap:6px;">
              <label for="pageSize" style="color:var(--muted);">每页</label>
              <select class="select" id="pageSize">
                <option>10</option>
                <option>20</option>
                <option>50</option>
              </select>
              <span style="color:var(--muted);">条</span>
            </span>
            <button class="button secondary" id="pageNext">下一页</button>
          </div>
        </section>

      </main>
    </div>
  </div>

  <script>
    // 树状菜单展开/折叠
    const treeHeader = document.querySelector('.tree-header');
    if (treeHeader) treeHeader.addEventListener('click', () => treeHeader.parentElement.classList.toggle('expanded'));

    // 查询与重置
    document.getElementById('btnQuery').addEventListener('click', () => {
      const qClass = document.getElementById('qClass').value.trim().toLowerCase();
      const qStatus = document.getElementById('qStatus').value;
      const rows = Array.from(document.querySelectorAll('#jobsBody tr'));
      rows.forEach(row => {
        const cls = row.children[1].textContent.toLowerCase();
        const statusEl = row.querySelector('.status');
        const st = statusEl ? statusEl.getAttribute('data-status') : '';
        const match = (!qClass || cls.includes(qClass)) && (!qStatus || st === qStatus);
        row.style.display = match ? '' : 'none';
      });
    });
    document.getElementById('btnReset').addEventListener('click', () => {
      document.getElementById('qClass').value = '';
      document.getElementById('qStatus').value = '';
      document.querySelectorAll('#jobsBody tr').forEach(tr => tr.style.display = '');
    });

    // 全选
    document.getElementById('chkAll').addEventListener('change', (e) => {
      document.querySelectorAll('#jobsBody input[type=checkbox]').forEach(chk => chk.checked = e.target.checked);
    });

    // 新增示例任务
    document.getElementById('btnAdd').addEventListener('click', () => {
      const tbody = document.getElementById('jobsBody');
      const tr = document.createElement('tr');
      const rand = Math.floor(Math.random()*1000);
      tr.innerHTML = `
        <td><input type="checkbox" /></td>
        <td>自定义任务${rand}</td>
        <td>0/30 * * * * ? *</td>
        <td>每30秒执行一次</td>
        <td><span class="status" data-status="正常" style="color:#10b981;">正常</span></td>`;
      tbody.appendChild(tr);
    });

    // 导出为 CSV
    function exportTable(tableId, filename) {
      const table = document.getElementById(tableId);
      let csv = '';
      table.querySelectorAll('tr').forEach(row => {
        const cells = Array.from(row.children).map(td => '"' + td.textContent.replace(/"/g,'""') + '"');
        csv += cells.join(',') + '\n';
      });
      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = filename + '.csv';
      a.click();
      URL.revokeObjectURL(a.href);
    }
    document.getElementById('btnExport').addEventListener('click', () => exportTable('tblJobs','定时任务'));

    // 导入 CSV（简单示例：按列追加到表格）
    document.getElementById('fileImport').addEventListener('change', async (e) => {
      const file = e.target.files[0];
      if (!file) return;
      const text = await file.text();
      const lines = text.trim().split(/\r?\n/);
      const tbody = document.getElementById('jobsBody');
      lines.slice(1).forEach(line => { // 跳过表头
        const cols = line.split(',').map(s=>s.replace(/^"|"$/g,''));
        const tr = document.createElement('tr');
        const statusTxt = cols[4] || '正常';
        const statusColor = statusTxt === '停止' ? '#ef4444' : '#10b981';
        tr.innerHTML = `
          <td><input type="checkbox" /></td>
          <td>${cols[1]||''}</td>
          <td>${cols[2]||''}</td>
          <td>${cols[3]||''}</td>
          <td><span class="status" data-status="${statusTxt}" style="color:${statusColor};">${statusTxt}</span></td>`;
        tbody.appendChild(tr);
      });
      e.target.value = '';
    });

  </script>
</body>
</html>